<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="20">
          <el-input
            v-model="searchModel.tbLink"
            placeholder="淘宝链接"
            clearable
          />
          <el-input
            v-model="searchModel.upTime"
            placeholder="时间"
            clearable
          />
          <el-input
            v-model="searchModel.name"
            placeholder="姓名"
            clearable
          />
          <el-input
            v-model="searchModel.storeId"
            placeholder="本店宝贝id"
            clearable
          />
          <el-button
            type="primary"
            round
            icon="el-icon-search"
            @click="getTBLinkList"
          >查询
          </el-button>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            round
            icon="el-icon-upload"
            @click="exportCsv"
          >导出csv
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!--输入需求-->
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="选品文件：" class="el-col-4">
          <el-upload
            class="upload"
            ref="upload"
            action="string"
            :file-list="fileList"
            :on-change="handleChange"
            :auto-upload="false"
            :limit="1"
            multiple="multiple"
          >
            <el-button
              slot="trigger"
              size="small"
              type="primary"
              @click="delFile"
            >选取文件
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item class="el-col-3">
          <el-button size="small" type="primary" @click="getTBData">提交</el-button>
        </el-form-item>
      </el-form>
      <!--上传电趣文件-->
      <el-form :inline="true" :model="formInlineTwo" class="demo-form-inline">
        <el-form-item label="电趣文件：" class="el-col-4">
          <el-upload
            class="upload"
            ref="upload"
            action="string"
            :file-list="fileListTwo"
            :on-change="handleChangeTwo"
            :auto-upload="false"
            :limit="1"
            multiple="multiple"
          >
            <el-button
              slot="trigger"
              size="small"
              type="primary"
              @click="delFileTwo"
            >选择文件
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item class="el-col-3">
          <el-button size="small" type="primary" @click="getDqData">提交</el-button>
        </el-form-item>
      </el-form>
      <!--可导出的数量-->
      <el-form :inline="true" :model="formInlineTwo" class="demo-form-inline">
        <el-form-item label="可导出数量：" class="el-col-2">
        </el-form-item>
        <el-form-item class="el-col-2">
          <el-button size="small" type="primary" @click="getCsvNum">查询</el-button>
        </el-form-item>
      </el-form>

    </el-card>

    <!-- 结果列表 -->
    <el-card>
      <el-table :data="tbLinkList" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="name" label="用户姓名" width="100"/>
        <el-table-column prop="storeId" label="本店商品id" width="180">
          <template slot-scope="scope">
            <a :href="scope.row.storeLink" target="_blank" class="blue-link">{{ scope.row.storeId }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="tbLink" label="淘宝链接" width="380">
          <template slot-scope="scope">
            <a :href="scope.row.tbLink" target="_blank" class="blue-link">{{ scope.row.tbLink }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="priceLink" label="价格链接" width="380">
          <template slot-scope="scope">
            <a :href="scope.row.priceLink" target="_blank" class="blue-link">{{ scope.row.priceLink }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="upTime" label="上传时间" width="100"/>
        <el-table-column prop="coupon" label="上家优惠劵" width="100"/>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <!--            <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="openEditUI(scope.row.id)" />-->
            <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="deleteTbLink(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50,100,200,500]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 展示重复的链接 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="clearForm"
    >
      <span>{{ againLinks }}</span>
    </el-dialog>
    <!-- 展示可导出的数量-->
    <el-dialog
      :title="csvTitle"
      :visible.sync="disPlayCsvNum"
      @close="clearForm"
    >
      <span>上次导出尾号：{{ preId }}</span>
      <br>
      <span>本次可导出数量：{{ csvNum }}</span>
    </el-dialog>
  </div>
</template>

<script>
import tbApi from '@/api/tb'
import axios from 'axios'

export default {
  data() {
    return {
      disPlayCsvNum: false,
      formLabelWidth: '130px',
      userForm: {
        roleIdList: []
      },
      dialogFormVisible: false,
      title: '',
      csvTitle: '每日仅限导出1次',
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 10,
        tbLink: '',
        upTime: '',
        name: '',
        storeId: ''
      },
      tbLinkList: [],
      fileList: [],
      fileListTwo: [],
      formInline: {
        formData: ''
      },
      formInlineTwo: {
        formData: ''
      },
      againLinks: '',
      preId: '',
      csvNum: ''
    }
  },
  created() {
    this.getTBLinkList()
  },
  methods: {
    getCsvNum() {
      tbApi.getCsvNum().then(response => {
        // 查询出可导出的数量
        this.disPlayCsvNum = true
        this.preId = response.data.preId
        this.csvNum = response.data.csvNum
      })
    },
    deleteTbLink(tbLink) {
      this.$confirm(`您确认删除链接 ${tbLink.tbLink} ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        tbApi.deleteTbLinkById(tbLink.id).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.getTBLinkList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    clearForm() {
      this.userForm = {
        roleIdList: []
      }
      this.$refs.userFormRef.clearValidate()
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize
      this.getTBLinkList()
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo
      this.getTBLinkList()
    },
    getTBLinkList() {
      tbApi.getTBLinkList(this.searchModel).then((response) => {
        this.tbLinkList = response.data.rows
        this.total = response.data.total
      })
    },
    exportCsv() {
      // /101.201.64.236
      this.downloadPost('http://101.201.64.236:9999/prod-api/tb/exportCsv', JSON.stringify({
        'exportTbCsvData': this.tbLinkList
      }))
    },
    downloadPost(action, formData) {
      const form = document.createElement('form')
      document.body.appendChild(form)
      form.appendChild(this.generateHideElement('data', formData))
      form.method = 'POST'
      form.action = action
      form.submit()
    },
    generateHideElement(name, value) {
      const inputEle = document.createElement('input')
      inputEle.type = 'hidden'
      inputEle.name = name
      inputEle.value = value
      return inputEle
    },
    getTBData() {
      // eslint-disable-next-line no-unused-vars
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const formData = new FormData()
      formData.append('file', this.fileList[0].raw)
      if (this.fileList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请提交文件'
        })
        console.log('未上传文件')
        return
      }
      axios.post('http://101.201.64.236:9999/prod-api/tb/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8'
        }
      }).then(res => {
        loading.close()
        // console.log(res)
        //  this.option = res.data.data.option
        const aaa = res.data.message
        // eslint-disable-next-line no-new-object
        console.log(aaa)
        if (res.data.code === 20000) {
          // 成功提示
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        } else {
          this.dialogFormVisible = true
          this.againLinks = aaa
          // this.$message({
          //   message: '重复链接' + aaa,
          //   type: 'warning'
          // })
        }
      })
    },
    getDqData() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const formData = new FormData()
      formData.append('file', this.fileListTwo[0].raw)
      if (this.fileListTwo.length === 0) {
        this.$message({
          type: 'warning',
          message: '请提交文件'
        })
        console.log('未上传文件')
        return
      }
      axios.post('http://101.201.64.236:9999/prod-api/tb/dqUpload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8'
        }
      }).then(res => {
        loading.close()
        // console.log(res)
        //  this.option = res.data.data.option
        const aaa = res.data.message
        // eslint-disable-next-line no-new-object
        console.log(aaa)
        if (res.data.code === 20000) {
          // 成功提示
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: aaa,
            type: 'warning'
          })
        }
      })
    },
    // 点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = []
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    // 点击文件
    handlePreview(file) {
      console.log(file)
    },
    delFileTwo() {
      this.fileListTwo = []
    },
    handleChangeTwo(file, fileList) {
      this.fileListTwo = fileList
    },
    // 点击文件
    handlePreviewTwo(file) {
      console.log(file)
    }
  }
}
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}
</style>
